import { useRef, forwardRef, useImperativeHandle } from 'react';
const Head = forwardRef(function Head(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      style() {
        inputRef.current.style.background = 'red';
      },
    };
  });
  return (
    <div>
      <input type="text" ref={inputRef}></input>
    </div>
  );
});
function App() {
  const refHead = useRef(null);
  // 所以要改为，有记忆功能的ref
  const handleClick = () => {
    refHead.current.focus();
    // refHead.current.style.background = '#ff0';//error
    refHead.current.style(); //correct
  };
  return (
    <div>
      hello App
      <button onClick={handleClick}>forwardRef操作</button>
      <br />
      <Head ref={refHead}></Head>
    </div>
  );
}
export default App;
